<template>
  <div class="wrap">
    <ul>
      <li v-for="(item, index) in msglist" :key="index">
        <p>
          <span>{{ item.user }}</span>
          <span>{{ item.datatime }}</span>
        </p>
        <p>
          {{ item.msg }}
        </p>
      </li>
    </ul>
    <input type="text" placeholder="请输入内容" v-model="msg" />
    <button @click="upmsg">发送</button>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const msg = ref('')
const msglist = ref([])
onMounted(() => {
  console.log(123)

  const username = localStorage.getItem('username')
})
const upmsg = () => {
  if (!msg.value.trim().length) {
    return
  }
  msglist.value.push({
    id: new Date().getDate(),
    user: localStorage.getItem('username'),
    msg: msg.value,
    datatime: new Date().getTime(),
  })
  console.log(msglist.value)

  msg.value = ''
}
</script>
<style scoped>
</style>
